<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文档管理系统</title>
	{js href="https://zwgt-cache.oss-cn-hangzhou.aliyuncs.com/static/home/js/jquery.js" /}
	<style>
	*{
		margin: 0;
	}
	ul,ol,li {
		list-style: none;
		margin: 0 0;
		padding: 0 0;
	}
	body {
		background: #eee;
		font-family: SimSun, LiSu, SimHei, sans-serif;
		font-size: 20px;
		color:#000;
		margin: 0;
		padding: 0;
	}
	button,p,li{
		color: #00A3FF;
		text-align: center;
	}
	div{
		/* border: 1px solid red; */
		box-sizing: border-box;

	}

	input[type="radio"] {
		width: 49px;
		height: 16px;
	}

	

	/*设置选中的input的样式*/
	/* + 是兄弟选择器,获取选中后的label元素*/
	input:checked+label {
		background-color: #006eb2;
		border: 1px solid #006eb2;
	}

	input:checked+label::after {
		position: absolute;
		content: "";
		width: 5px;
		height: 10px;
		top: 1px;
		left: 4px;
		border: 2px solid #fff;
		border-top: none;
		border-left: none;
		transform: rotate(45deg);
	}
	.alertDark{
		width: 150px;
		min-height: 22px;
		border-radius: 8px;
		color: #fff;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		padding: 12px 10px;
		background-color: rgba(0, 0, 0, 0.75);
		position: fixed;
		left: 50%;
		top: 50%;
		margin-left: -75px;
		z-index: 100;
	}


	.show{
		width: 100%;
		min-height: 500px;
		padding: 15px;
	}
	.con1{
		float: left;
		display: inline-block;
		width: 20%;
	}
	button{
		border: 1px solid #00A3FF;
		border-radius: 5px;
		background: white;
		
	}
	.user button{
		position: absolute;
		top: 15px;
		right: 15px;
		padding: 5px 30px;
	}
	.user{
		position: relative;
		background: white;
		margin: 0 18px 18px 0;
	}
	.userName{
		position: absolute;
		right: 5%;
		bottom: 15px;
		color: #00A3FF;
	}
	.userphone{
		position: absolute;
		right: 5%;
		top: 50%;
		bottom: 15px;
		color: #00A3FF;
	}
	.user img{
		width: 33%;
		margin: 15px 10px; 
	}
	.con2{
		float: right;
		display: inline-block;
		width: 79%;
		
	}
	.con1 ul{
		background: #eee;
	}
	.con1 li{
		margin-bottom: 1px;
		overflow: hidden;
	}
	.con1 .li > span{
		display: inline-block;
		float: left;
		width: 95%;
		background: #fff;
		line-height: 40px;
	}
	.con1 .project{
		background: #00A3FF;
		border: 1px solid #00A3FF;
		color: white;
		line-height: 55px;
	}
	.con2{
		background: white;
		min-height: 800px;
	}
	.buttonList{
		overflow: hidden;
		padding: 14px 30px;
		border-bottom: 2px solid #eee;
	}
	.buttonList li{
		float: right;
		margin-left: 10px;
	}
	.buttonList .button{
		padding: 5px 20px;
	}
	.content{
		margin-top: 20px;
	}
	.content li{
		padding: 0 55px;
		text-align: left;
		color: #666666;
		font-size: 24px;
		line-height: 50px;
		position: relative;
		letter-spacing: 1.5px;
	}
	.share{
		display: inline-block;
		border: 1px solid #00A3FF;
		border-radius: 5px;
		background: white;
		color: #00A3FF;
		margin-left: 20px;
		line-height: 24px;
		font-size: 16px;
	}
	.aside{
		box-shadow: 1px 1px 3px 2px #adadad;
		border-radius: 5px;
		width: 200px;
		height: 150px;
		background: white;
		position: fixed;
		top: 10%;
		left: 70%;
	}
	.aside {
		text-align: center;
	}
	.aside input{
		width: 80%;
		margin: auto;
	}
</style>
</head>
<body>
	<div class="show">
		<div class="con1">
			<div class="user">
				<img src="/static/img/img_head.png" alt="">
				<span class="userName">{$myInfo.nickname}</span>
				<span class="userphone">{$myInfo.phone}</span>
				<button class="button" onclick="tologin()">退出</button>
			</div>
			<ul class="ul">
				<li class="li project" onclick="window.location.reload();changebtnlist('buttonList1');">我的文档
				</li>
				<li class="li project"  onclick="showfriendlist();changebtnlist('buttonList2');">我的好友
				</li>
				<li class="li shrank" >
					{volist name="myFriend" id="id" key="k"}
					<span onclick="checkfriend({$id.id})" class="shrank">{$id.nickname}</span>
					{/volist}
					
					
				</li>
				<li class="li project"onclick="checkrecycle();changebtnlist('buttonList3');">回收站
				</li>
			</ul>
		</div>
		<div class="con2">
			<ul class="buttonList" id="buttonList1" style="display: block">
				<li><button class="button" >分享/取消</button></li>
				<li><button class="button">下载</button></li>
				<li><button class="button" onclick="filesdelete()">删除</button></li>
				<li><button class="button" id="show_titleedit_box">修改</button></li>
				<li><button class="button" id="add">添加</button></li>
			</ul>
			<ul class="buttonList" id="buttonList2" style="display: none">
				<li><button class="button">下载</button></li>
			</ul>
			<ul class="buttonList" id="buttonList3" style="display: none">
				<li><button class="button" onclick="filesremove()">彻底删除</button></li>
				<li><button class="button" onclick="filerestore()">还原</button></li>
			</ul>
			<ul class="content" id="content">
			</ul>

		</div>
	</div>
	<div class="aside titleedit_box" id="titleedit_box" style="display: none">
		<br><h5>修改文件名</h5>
		<br>
		<input type="text" class="input"   placeholder="请输入新的文件名" id="titleedit">
		<br>
		<br>
		<button class="button" onclick="titleedit()">确定修改</button>
	</div>
	<div class="alertDark J_alertTip" style="display:none;"></div>
	<script type="text/javascript" src="https://zwgt-cache.oss-cn-hangzhou.aliyuncs.com/static/h5/js/zepto.js"></script>
	<script>
		var myFriend = {$myFriend|json_encode};
		var myInfo = {$myInfo|json_encode};
		var myFile = {$myFile|json_encode};
		// 选中id
		var onCheckId = "";
		showList(myFile);
		//定义全局的接口
		var API_ROOT = {Host: location.protocol + "//" + window.location.host};
		Infs = {
			friend:{
				url:API_ROOT.Host+"/index/user/userfile", //查询好友分享
				type:"post"
			},
			checkrecycle:{
				url:API_ROOT.Host+"/index/user/recycle", //查询回收站
				type:"post"
			},
			titleedit:{
				url:API_ROOT.Host+"/index/user/titleedit", //修改
				type:"post"
			},
			filesdelete:{
				url:API_ROOT.Host+"/index/user/filesdelete", //删除
				type:"post"
			},
			filerestore:{
				url:API_ROOT.Host+"/index/user/filerestore", //还原
				type:"post"
			},
			filesremove:{
				url:API_ROOT.Host+"/index/user/filesremove", //彻底删除
				type:"post"
			},

		};
		// 列表显示
		function showList(list){
			console.log(list);
			var inputmod ;
			var share = "";
			var liList = '';
			if (list.length == 0) {
				$('#content').html("<li>暂无数据</li>")
				return
			}
			for (var i = 0; i < list.length; i++) {
				if (list[i].share == 1) {
					share = '<span class="share">已分享</span>'
				}else{
					// share = '<span class="share">已分享</span>'
					//console.log("本条没分享")
				}

				inputmod = '<li><input type="radio" name="input" id="item[' + i + ']" value="'+ list[i].id +'" class="onCheck"><span>' + list[i].title + '</span>' + share + '</li>';
				// console.log(liList)
				liList = liList + inputmod;
			}
			
			$('#content').html(liList);
			//修改选中事件后修改全局选中id
			$('.onCheck').change(function() {
				onCheckId = this.value;
				console.log(onCheckId);
			});
		}
		$('#add').on('click', function(){
			window.location.href = '/index/user/add';
		})
		//查询好友分享的文档
		function checkfriend(friendid){
			var toData = {"fid": friendid}
			$.ajax({
				url: Infs.friend.url,
				type: Infs.friend.type,
				data: toData,
				success: function (res) {
					showList(res.data);
					changebtnlist('buttonList2');
					console.log(res);    

				}
			});
		}
		//查询回收站
		function checkrecycle(bin){

			var toData = {"uid": myInfo.id}
			$.ajax({
				url: Infs.checkrecycle.url,
				type: Infs.checkrecycle.type,
				data: toData,
				success: function (res) {
					showList(res.data);
					
				}
			});
		}
		/*
	     * 回收站还原
	     * post tid:文件id
	     */
	     function filerestore(){
	     	var toData = {"tid": ""}
	     	toData.tid = onCheckId;
	     	if (toData.tid == '') {
	     		alertDark('请选中文件再做删除')
	     		return
	     	}
	     	console.log(toData);
	     	$.ajax({
	     		url: Infs.filerestore.url,
	     		type: Infs.filerestore.type,
	     		data: toData,
	     		success: function (res) {
	     			checkrecycle(); 


	     		}
	     	});
	     }
	     /*
	     * 从回收站彻底删除
	     * post ids: 文件id(用逗号连接)
	     */
	     function filesremove(){
	     	var toData = {"ids": ""}
	     	toData.ids = onCheckId;
	     	if (toData.tid == '') {
	     		alertDark('请选中文件再做删除')
	     		return
	     	}
	     	console.log(toData);
	     	$.ajax({
	     		url: Infs.filesremove.url,
	     		type: Infs.filesremove.type,
	     		data: toData,
	     		success: function (res) {
	     			checkrecycle(); 
	     		}
	     	});
	     }
		//修改
		function titleedit(){

			var toData = {"tid": "","title":""}
			toData.tid = onCheckId;
			if (onCheckId == '') {
				alertDark('请选中文件再做修改')
				return
			}
			toData.title = $("#titleedit").val(); 
			console.log(toData);
			$.ajax({
				url: Infs.titleedit.url,
				type: Infs.titleedit.type,
				data: toData,
				success: function (res) {
					window.location.reload(); 


				}
			});
		}
		//删除
		function filesdelete(){

			var toData = {"ids": ""}
			toData.ids = onCheckId;
			if (toData.tid == '') {
				alertDark('请选中文件再做删除')
				return
			}
			console.log(toData);
			$.ajax({
				url: Infs.filesdelete.url,
				type: Infs.filesdelete.type,
				data: toData,
				success: function (res) {
					window.location.reload(); 


				}
			});
		}
		//下载
		//分享
		//取消分享
		
		//好友列表缩放
		showfriendlist();
		function showfriendlist(){
			
			if ($('.shrank')[0].style.lineHeight == '0px') {

				for (var i = $('.shrank').length - 1; i >= 0; i--) {
					$('.shrank')[i].style.lineHeight = '40px';
				}
			}else{
				// console.log('111')
				for (var i = $('.shrank').length - 1; i >= 0; i--) {
					$('.shrank')[i].style.lineHeight = '0px';
				}
			}
			
			
		}
		onclick="btntoggle(show_titleedit_box,)" 
		//切换显示隐藏
		
		$("#show_titleedit_box").click(function(){
			changebtnlist('buttonList2');
			$("#titleedit_box").toggle();
		});
		
		function alertDark(e){
			$('.J_alertTip').show();
			$('.J_alertTip').html(e);
			setTimeout("$('.J_alertTip').hide(300)",2000);
		}
		// 返回登录
		function tologin(){
			window.location.href = 'http://bs.com/';
		}
		function changebtnlist(buttonList){
			onCheckId = "";
			$('#buttonList1').hide()
			$('#buttonList2').hide()
			$('#buttonList3').hide()
			$('#' + buttonList).show();
		}
	</script>
</body>
</html>